/**
 * @author jilanlan
 * @date 2021/9/15 2:42 下午
 * @description
 */
import React, {FunctionComponent, useEffect, useState} from "react";
import {Input, Avatar, Modal, Button, Divider} from "antd";
import {LogoutOutlined, UserOutlined} from "@ant-design/icons";
import {useDispatch} from "react-redux";
import {Post} from "para-lib";
import {authLogOutActions} from "../../store/actions/authAction";
import {API_CONFIG} from "../../config/api.config";

import "./index.less";

const {Search} = Input;

const Header: FunctionComponent<any> = () => {
    const dispatch = useDispatch();
    const [visible, setVisible] = useState<boolean>(false);
    const [userData, setUserData] = useState<any>({});

    const onSearch = () => {

    };

    const logout = () => {
        setVisible(false);
        dispatch(authLogOutActions(dispatch));
    };

    /**
    * 获取用户信息
    */
    const getUserInfo = async () => {
        const {data, err} = await Post({
            url: API_CONFIG.User.profile
        });
        if (err) return;
        console.log(data);
        setUserData(data.data)
    };

    useEffect(() => {
        getUserInfo();
    }, []);

    return (
        <div className="main-header">
            {/*<Search placeholder="搜索" onSearch={onSearch}/>*/}
            <div className="right-box">
                <Avatar icon={<UserOutlined/>}/>
                <span className="username">{userData.username}</span>
                <Divider type="vertical" />
                <Button shape="circle" icon={<LogoutOutlined/>} onClick={() => setVisible(true)}/>
            </div>

            <Modal
                title="退出提示"
                visible={visible}
                centered
                focusTriggerAfterClose={false}
                onOk={() => logout()}
                onCancel={() => setVisible(false)}
                okText="确认"
                cancelText="取消"
            >
                <p className="dialog-content">确认退出系统吗？</p>
            </Modal>
        </div>
    );
};
export default Header;
